{% extends "base.html" %}

{% block title %}修改密码 - 镜像传输系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-5">
        <div class="card shadow">
            <div class="card-header bg-warning text-white text-center">
                <h4 class="mb-0">
                    <i class="fas fa-key me-2"></i>修改密码
                </h4>
            </div>
            <div class="card-body">
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                                <i class="fas fa-{{ 'exclamation-circle' if category == 'error' else 'info-circle' }} me-2"></i>
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

                <form method="POST" action="{{ url_for('auth.change_password') }}" id="changePasswordForm">
                    <div class="mb-3">
                        <label for="current_password" class="form-label">
                            <i class="fas fa-lock me-2"></i>当前密码
                        </label>
                        <input type="password" class="form-control" id="current_password" name="current_password" 
                               placeholder="请输入当前密码" required>
                        <div class="form-text">请输入您当前的登录密码</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="new_password" class="form-label">
                            <i class="fas fa-key me-2"></i>新密码
                        </label>
                        <input type="password" class="form-control" id="new_password" name="new_password" 
                               placeholder="请输入新密码" required minlength="6">
                        <div class="form-text">新密码长度至少6位，建议包含字母、数字和特殊字符</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="confirm_password" class="form-label">
                            <i class="fas fa-check-circle me-2"></i>确认新密码
                        </label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" 
                               placeholder="请再次输入新密码" required>
                        <div class="form-text">请再次输入新密码以确保输入正确</div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="password-strength" id="passwordStrength">
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar" id="strengthBar" role="progressbar" style="width: 0%"></div>
                            </div>
                            <small class="text-muted" id="strengthText">密码强度: 弱</small>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-warning btn-lg">
                            <i class="fas fa-save me-2"></i>保存新密码
                        </button>
                        <a href="{{ url_for('auth.profile') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>返回个人资料
                        </a>
                    </div>
                </form>
                
                <hr class="my-4">
                
                <div class="alert alert-info">
                    <h6><i class="fas fa-info-circle me-2"></i>密码安全提示</h6>
                    <ul class="mb-0">
                        <li>使用至少8位字符的强密码</li>
                        <li>包含大小写字母、数字和特殊字符</li>
                        <li>避免使用个人信息作为密码</li>
                        <li>定期更换密码，建议每3个月更换一次</li>
                        <li>不要在多个网站使用相同密码</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.card {
    border: none;
    border-radius: 15px;
}

.card-header {
    border-radius: 15px 15px 0 0 !important;
}

.form-control:focus {
    border-color: #ffc107;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

.btn-warning {
    border-radius: 10px;
    padding: 12px;
}

.btn-outline-secondary {
    border-radius: 10px;
}

.alert {
    border-radius: 10px;
}

.password-strength {
    margin-top: 10px;
}

.progress {
    border-radius: 10px;
    background-color: #e9ecef;
}

.strength-weak { background-color: #dc3545; }
.strength-medium { background-color: #ffc107; }
.strength-strong { background-color: #28a745; }
.strength-very-strong { background-color: #20c997; }
</style>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
    const currentPassword = document.getElementById('current_password').value;
    const newPassword = document.getElementById('new_password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    if (!currentPassword || !newPassword || !confirmPassword) {
        e.preventDefault();
        alert('请填写所有字段！');
        return false;
    }
    
    if (newPassword !== confirmPassword) {
        e.preventDefault();
        alert('两次输入的新密码不一致！');
        return false;
    }
    
    if (newPassword.length < 6) {
        e.preventDefault();
        alert('新密码长度至少6位！');
        return false;
    }
    
    if (newPassword === currentPassword) {
        e.preventDefault();
        alert('新密码不能与当前密码相同！');
        return false;
    }
    
    return true;
});

// 实时密码确认验证
document.getElementById('confirm_password').addEventListener('input', function() {
    const newPassword = document.getElementById('new_password').value;
    const confirmPassword = this.value;
    
    if (confirmPassword && newPassword !== confirmPassword) {
        this.setCustomValidity('密码不匹配');
    } else {
        this.setCustomValidity('');
    }
});

// 密码强度检测
document.getElementById('new_password').addEventListener('input', function() {
    const password = this.value;
    const strength = calculatePasswordStrength(password);
    updatePasswordStrength(strength);
});

function calculatePasswordStrength(password) {
    let score = 0;
    
    if (password.length >= 8) score += 1;
    if (password.length >= 12) score += 1;
    if (/[a-z]/.test(password)) score += 1;
    if (/[A-Z]/.test(password)) score += 1;
    if (/[0-9]/.test(password)) score += 1;
    if (/[^A-Za-z0-9]/.test(password)) score += 1;
    
    if (score <= 2) return { level: 'weak', percentage: 25, text: '弱' };
    if (score <= 3) return { level: 'medium', percentage: 50, text: '中等' };
    if (score <= 4) return { level: 'strong', percentage: 75, text: '强' };
    return { level: 'very-strong', percentage: 100, text: '很强' };
}

function updatePasswordStrength(strength) {
    const strengthBar = document.getElementById('strengthBar');
    const strengthText = document.getElementById('strengthText');
    
    strengthBar.style.width = strength.percentage + '%';
    strengthBar.className = 'progress-bar strength-' + strength.level;
    strengthText.textContent = '密码强度: ' + strength.text;
    
    // 更新颜色
    strengthBar.className = 'progress-bar';
    if (strength.level === 'weak') strengthBar.classList.add('strength-weak');
    else if (strength.level === 'medium') strengthBar.classList.add('strength-medium');
    else if (strength.level === 'strong') strengthBar.classList.add('strength-strong');
    else strengthBar.classList.add('strength-very-strong');
}
</script>
{% endblock %} 